<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

    <style>
        .a{
            background-color: chartreuse;
        }
        .b{
            background-color: coral;
        }
    </style>



</head>

<body>

<div id="myApp">
    <h3> v-for:奇数行、偶数行 颜色不一样 </h3>

    <table border="1">
        <tr>
            <td>序号</td>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
        <tr v-for="(user,index) in users" :class="{'a':user.id % 2==0,'b':user.id % 2 !=0 }"  >
            <td v-text="index + 1"></td>
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.password"></td>
        </tr>
    </table>
    <h3>index和v-for不能放在同一行</h3>
    <table border="1">
        <tr>
            <td>序号</td>
            <td>ID</td>
            <td>用户名</td>
            <td>密码</td>
        </tr>
        <tbody v-for="(user,index) in users">
        <tr  v-if="index % 2 == 0" style="background-color: coral" >
            <td v-text="index + 1"></td>
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.password"></td>
        </tr>

        <tr  v-if="index % 2 != 0" style="background-color: red" >
            <td v-text="index + 1"></td>
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.password"></td>
        </tr>
        </tbody>
    </table>
    <h3> template:vue提供的一个标签 </h3>
    <ol>
        <template v-for="(user,index) in users">
        <li v-if="index % 2 == 0" style="background-color: aqua"></li>
        <li v-if="index % 2 != 0" style="background-color: chartreuse"></li>
        </template>
    </ol>


</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                ids:[1,2,3,4,5,6],//数组
                users:[ //数组
                    {id:1,userName:'张三',password:'123456'},//json对象
                    {id:2,userName:'李四',password:'123456'},
                    {id:3,userName:'王五',password:'123456'},
                    {id:4,userName:'赵六',password:'123456'},
                ]
            }
        }
    }).mount('#myApp')
</script>

</html>